<template>
  <div class="goods-buy">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar van-hairline--bottom" @click-left="$router.back()">
      <template #left>
        <van-icon name="arrow-left" />
        <div class="title-wrap van-ellipsis">{{$store.state.goodsInfo.goods_name}}</div>
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 主体内容 -->
    <van-tabs class="centerWrap" v-model="activeName">
      <!-- 基本信息tab -->
      <van-tab title="基本信息" name="a">
        <base-information @goodsNum="onchange($event)" />
      </van-tab>
      <!-- /基本信息tab -->

      <!-- 图文详情 -->
      <van-tab title="图文详情" name="b">
        <image-text />
      </van-tab>
      <!-- /图文详情 -->
    </van-tabs>
    <!-- /主体内容 -->
    <!-- 商品导航 -->
    <van-goods-action class="footer-nav">
      <van-goods-action-icon icon="shared-o" text="分享" @click="showShare=true" />
      <van-goods-action-icon
        icon="cart-o"
        @click="$router.push('/goodscar')"
        text="购物车"
        :badge="goodsCarNum"
      />
      <van-goods-action-button type="warning" @click="goodsCarNum++" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" @click="onclick" />
    </van-goods-action>
    <!-- /商品导航 -->

    <!-- 分享面板弹出层 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友，帮忙砍一刀"
      :options="shareOptions"
      @select="onSelect"
    />
  </div>
</template>

<script>
import BaseInformation from './base-information'
import ImageText from './image-text'
import { mapState } from 'vuex'
import { getShops } from '@/api/shops.js'

export default {
  name: 'GoodsBuy',
  components: {
    BaseInformation, ImageText
  },
  props: {},
  data () {
    return {
      activeName: 'a',
      showShare: false, //分享面板的显示状态
      shareOptions: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      goodsCarNum: 0, //购物车已有商品数
      shops: {}
    }
  },
  created () {
    this.getLength()
  },
  mounted () {

  },
  watch: {},
  computed: {
    ...mapState(['goodsCarList'])
  },
  methods: {
    onSelect (option) {
      this.$toast(option.name);
      this.showShare = false;
    },
    async getLength () {
      this.goodsCarNum = this.goodsCarList.length
      this.$toast.loading({
        message: '获取店铺信息中...',
        forbidClick: true, // 禁用背景点击
        duration: 2000 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      try {
        const { data } = await getShops({
          pageNum: 1,
          pageSize: 20
        })
        this.shops = data.data.rows[2]
        this.$store.commit('setStore', this.shops)
      } catch (err) {
        this.$toast('数据获取失败')
      }
    },
    onchange (info) {
      this.$store.commit('setGoodsLists', info)
    },
    onclick () {
      this.$store.commit('setShops', null)
      this.$router.push({
        name: 'hh'
      })
    }
  }
}
</script>

<style scoped lang="less">
.centerWrap {
  margin-top: 50px;
}
/* 导航栏 */
/deep/.page-nav-bar {
  position: fixed;
  top: 0;
  background-color: #fff;
  .van-nav-bar__text {
    color: #2c2c2c;
  }
  .van-icon {
    color: #2c2c2c;
  }
}
/* /导航栏 */
.title-wrap {
  color: #2c2c2c;
  margin-left: 20px;
  width: 230px;
  font-weight: 600;
}
/deep/.van-tabs__nav {
  .van-tab--active {
    color: red;
  }
}
.footer-nav {
  position: fixed;
  bottom: 0;
}
</style>
